<template>
  <q-form ref="form" @submit="onSubmit" class="q-gutter-md q-pb-xl">
    <formInput ref='formInput' :fieldlist="formFields" />

    <history v-if="mode === 'edit'" class="q-mb-xl" :data="historyData" :escape="historyEscape" :tableFields="tableFields" />

    <q-page-sticky position="bottom" :offset="[0, 28]">
      <q-btn label="保存" type="submit" color="primary" class="btn-fixed-width" icon="save" :loading="saving" v-if="canSave" />
      <q-btn label="返回" @click="onReset" color="primary" outline class="q-ml-md bg-white" />
    </q-page-sticky>
  </q-form>
</template>

<script>
import { defineComponent } from 'vue';
import formInput from 'src/components/FormInput.vue';
import { detailPageMix } from 'src/lib/mixin.js';
import history from 'src/components/history.vue'
import { useMeta } from 'quasar';
import { useStore } from 'stores/store';

export default defineComponent({
  name: 'customerDetail',
  setup (props, context) {
    const $store = useStore();
    const modelLabel = '客户档案';
    const moduleName = 'customer';
    const detailApi = `/c2/tenant/${moduleName}/detail`; // 明细数据接口
    const createApi = `/c2/tenant/${moduleName}/create`; // 新建数据接口
    const updateApi = `/c2/tenant/${moduleName}/update`; // 更新数据接口

    useMeta({
      // 设置文件标题
      title: `${modelLabel}详情 - ${$store.siteConfig.appName} - 木多鱼系列`
    });

    return {
      modelLabel,
      moduleName,
      detailApi,
      createApi,
      updateApi
    }
  },
  components: {
    formInput,
    history
  },
  mixins: [detailPageMix],
  data () {
    const self = this;
    return {
      formFields: {
        images: { type: 'image', label: '客户图片', value: [], readonly: false },
        nickname: { type: 'input', label: '客户名称 *', value: '', rules: [val => !!val || '请输入客户名称', this.checkCode], readonly: false },
        company: { type: 'input', label: '开票抬头', value: '', readonly: false },
        contact: { type: 'input', label: '联系人', value: '', readonly: false },
        tel: { type: 'input', label: '电话', value: '', readonly: false },
        email: { type: 'input', label: '邮箱', value: '', readonly: false },
        address: { type: 'input', label: '地址', value: '', readonly: false },
        remark: { type: 'input', label: '备注', value: '', textarea: true, readonly: false }
      }
    };
  },
  async created () {
  },
  mounted () {
    if (this.mode === 'edit') {
      this.refreshData();
    }
  },
  methods: {
    onSubmit () {
      this.$refs.formInput.validateAll();
      this.$nextTick(() => {
        this.$refs.form.validate().then(ot => {
          if (ot) {
            this.saving = true;
            this.$refs.formInput.getFormData().then(data => {
              this.saveData(data);
            }).catch(e => {
              console.log(e);
              this.saving = false
            });
          }
        });
      });
      // this.saving = true;
      // this.saveData();
    },
    checkCode (code) {
      return new Promise((resolve, reject) => {
        this.$axios.post('/c/system/checkRepeatCode', { code: 'CU', values: { nickname: code }, exclude: ['id', this.id] }).then(({ data }) => {
          resolve(data ? '客户名称重复' : null);
        });
      });
    }
  },
  computed: {
  },
  watch: {
  }
});
</script>
